<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>众发燃气表大数据平台</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BDkISzGKKEd0dSIymtncFKSrYMtkipNv"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    </head>
<style type="text/css">
    #allmap {width: 100%;height: 500px ;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>

<body>
<div class="data">

    <div class="data-title">
        <div class="title-left fl"></div>
        <div class="title-center fl">
            <p>众发燃气大数据展示平台</p>
        </div>
        <div class="title-right fr"></div>
    </div>
    <div class="data-content">
        <div class="con-left fl">
            <div class="left-top">
                <div class="info">
                    <div class="info-title">实时统计</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div class="info-main">
                        <div class="info-1">
                            <div class="info-img fl">
                                <img src="img/clock.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>装表总数(台)</p>
                                <p>12,457</p>
                            </div>
                        </div>
                        <div class="info-2">
                            <div class="info-img fl">
                                <img src="img/wifi.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>当前在线数(台)</p>
                                <p>10,151</p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="img/info-img-3.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日活跃数(台)</p>
                                <p>10,151</p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="img/info-img-4.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日活跃率(%)</p>
                                <p class="activeRate">
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-bottom">
                    <div class="title">表型分类</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div id="echarts_2" class="charts"></div>
                </div>
            </div>
            <!-- <div class="left-bottom">
                <div class="title">表型分类</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_2" class="charts"></div>
            </div> -->
        </div>
        <div class="con-center fl">
            <div class="map-num">
                <p>当前全国燃气表总数(台)</p>
                <div class="num">
                    <span>12,457</span>
                   
                </div>
            </div>
            <div class="cen-top" id="map"></div>
            <div class="cen-bottom">
                <div class="title">用气高峰时间</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_3" class="charts"></div>
            </div>
        </div>
        <div class="con-right fr">
            <div class="right-top">
                <div class="title">全年新装表状况</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_8" class="charts"></div>
               
            </div>
            <div class="right-center">
                <div class="title">当前总体报警率</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_7" class="charts"></div>
                
            </div>
            <div class="right-bottom hide">
                <div class="title">电池报警车辆TOP10</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_6" class="charts"></div>
            </div>
            <div class="right-bottom">
                <div class="title">报警类型排名</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_5" class="charts"></div>
            </div>
        </div>
    </div>
		<!-- 模态框展示地图详情 -->
		<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		    <div class="modal-dialog modal-lg" > 
		        <div class="modal-content" style="background-color:#12093a85">
		            <div class="cmodal-header">
		                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		                <h4 class="modal-title modalTitle"></h4>
		            </div>
		            <div class="modal-body">
		                <div id="allmap"></div>
		            </div>
		            <div class="cmodal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		    </div>
		</div>
</div>

</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>
<script src="js/echarts_2.js"></script>
<script src="js/echarts_3.js"></script>
<!-- <script src="js/echarts_4.js"></script> -->
<script src="js/echarts_5.js"></script>
<script src="js/echarts_6.js"></script>
<script src="js/echarts_7.js"></script>
<script src="js/echarts_8.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/test.js"></script>

<!-- <script src="js/test.js"></script> -->

</html>